<template>
  <!-- 商品列表组件 -->
  <div class="list_goods_cont">
    <!-- 面包屑导航栏区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 用栅栏布局进行分割 -->
      <el-row :gutter="20">
        <el-col :span="14">
          <!-- 搜索区域 -->
          <el-form ref="searchFormRef" :model="searchForm">
            <el-input placeholder="请输入内容" v-model="searchForm.queryText">
              <!-- 输入框旁边的放大镜搜索按钮 -->
              <el-button slot="append" icon="el-icon-search" @click="searchListGoods"></el-button>
            </el-input>
          </el-form>
        </el-col>
        <el-col :span="6">
          <!-- 添加商品区域 -->
          <el-button type="primary" @click="addListGoods_But">添加商品</el-button>
        </el-col>
      </el-row>
      <!-- 展示表格区域 -->
      <el-table :data="ListGoods.goods" border style="width: 100%">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格/元" width="95">
        </el-table-column>
        <el-table-column prop="goods_weight" label="商品重量/g" width="95">
        </el-table-column>
        <el-table-column prop="goods_number" label="商品数量" width="80">
        </el-table-column>

        <el-table-column prop="add_time" label="创建时间" width="170">
          <!--
            ------------------------------- 重点-------------------------------
            数据库给的是时间戳，不能直接展示。
            所以需要在：main.js内用filter创建一个过滤器
            时间过滤器的使用名称为：timeTransition，
            将时间戳转换成对应的日期时间再进行展示
          -->
          <template slot-scope="scope">
            {{scope.row.add_time | timeTransition}}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140">
          <!-- 操作块-编辑与删除按钮区域 -->
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="alterListGoodsBut(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeListGoodsBut(scope.row)">
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页按钮区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="listCurrentPage" :page-sizes="[5, 10, 15, 20]" :page-size="listPageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="ListGoods.total" :background="true">
      </el-pagination>
      <!-- 操作块-修改按钮弹出的对话框区域 -->
      <el-dialog title="编辑商品" :visible.sync="alterDialogVisible" width="80%" :before-close="alterHandleClose"
        :close-on-click-modal="false">
        <!-- 展示表单 -->
        <el-form :model="alterListGoodsForm" :rules="alterListGoodsFormRules" ref="alterListGoodsFormRef"
          label-width="100px" class="add_form">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="alterListGoodsForm.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input v-model="alterListGoodsForm.goods_number"></el-input>
          </el-form-item>
          <el-form-item label="价格/元" prop="goods_price">
            <el-input v-model="alterListGoodsForm.goods_price"></el-input>
          </el-form-item>
          <el-form-item label="重量/g" prop="goods_weight">
            <el-input v-model="alterListGoodsForm.goods_weight"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="alterHandleClose">取 消</el-button>
          <el-button type="primary" @click="alterListGoodsOK_But">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 商品列表的数据数组
        ListGoods: [],
        // 商品列表的分页组件-当前是第几页
        listCurrentPage: 1,
        // 商品列表的分页组件-每页展示几条数据
        listPageSize: 5,
        // 搜索区域的数据
        searchForm: {
          queryText: ''
        },
        // 操作块-编辑按钮弹出的对话框显示与隐藏
        alterDialogVisible: false,
        // 操作块-编辑按钮展示的表单数据
        alterListGoodsForm: {},
        // 操作块-编辑按钮展示的表单数据校验
        alterListGoodsFormRules: {
          goods_name: [{
            required: true,
            message: '请输入商品名称',
            trigger: 'blur'
          }],
          goods_price: [{
            required: true,
            message: '请输入商品价格',
            trigger: 'blur'
          }],
          goods_number: [{
            required: true,
            message: '请输入商品数量',
            trigger: 'blur'
          }],
          goods_weight: [{
            required: true,
            message: '请输入商品重量',
            trigger: 'blur'
          }],
        }
      }
    },
    created() {
      this.getListGoods()
    },
    methods: {
      // 获取商品列表数据
      async getListGoods() {
        let {
          data: res
        } = await this.$http.get('goods', {
          params: {
            query: this.searchForm.queryText,
            pagenum: this.listCurrentPage,
            pagesize: this.listPageSize
          }
        })


        if (res.meta.status === 200) {
          /* ----------------------------------- 重点 ---------------------------------
            获取的时间是一个时间戳，需要在：main.js 内定义一个全局的时间过滤器
            随后将时间戳转换成对应的日期时间再进行展示
          */
          this.ListGoods = res.data
        } else {
          this.$message.error("商品列表数据获取失败！")
        }
      },


      // 分页按钮-选择每页几条数据      
      handleSizeChange(pageSize) {
        this.listPageSize = pageSize
        this.getListGoods()
      },


      // 分页按钮-选择当前第几页
      handleCurrentChange(currentPage) {
        this.listCurrentPage = currentPage
        this.getListGoods()
      },


      // 搜索商品函数
      searchListGoods() {
        // 因为双向绑定更改了数据，随后再重新请求
        this.getListGoods()
        // 请求完记得重置为空
        this.searchForm.queryText = ''
      },


      // 操作块-编辑按钮的点击
      alterListGoodsBut(row) {
        this.alterListGoodsForm = row
        this.alterDialogVisible = true
      },

      // 操作块-编辑按钮对话框的关闭回调
      alterHandleClose() {
        this.alterDialogVisible = false
        this.alterListGoodsForm = {}
        this.$refs.alterListGoodsFormRef.resetFields()
      },


      // 操作块-编辑按钮对话框的确定回调
      alterListGoodsOK_But() {
        this.$refs.alterListGoodsFormRef.validate(async (valid, date) => {
          if (!valid) return

          /*------------------------------ 重点，问题 -----------------------------
            以下四个参数数据库有值，但前端请求过来数据为null；随后更改了后端的代码
            at_id: null  （商品自己所属的三级id）
            cat_one_id: null  （商品的一级id）
            cat_three_id: null  （商品的三级id）
            cat_two_id: null  （商品的二级id）
            
            实际还需要一个：goods_cat参数，格式如：goods_cat: "1,3,6" 。
            是商品所属的三个等级的分类id组合拼接在一起，
            而后端代码可能有问题，并没有调用拼接函数去定义这个goods_cat参数。
            所以导致发起请求后没有：goods_cat参数，所以前端会出bug
            解决办法：前端定义，传入参数加一个goods_cat，且不可为空
            
            总体解决办法： https://www.cnblogs.com/HE0318bei/articles/15750914.html
          */

          let alter_goods_cat = this.alterListGoodsForm.cat_one_id + ',' + this.alterListGoodsForm.cat_two_id + ',' +this.alterListGoodsForm.cat_three_id

          let {
            data: res
          } = await this.$http.put(`goods/${this.alterListGoodsForm.goods_id}`, {
            goods_name: this.alterListGoodsForm.goods_name,
            goods_price: this.alterListGoodsForm.goods_price,
            goods_number: this.alterListGoodsForm.goods_number,
            goods_weight: this.alterListGoodsForm.goods_weight,
            goods_cat: alter_goods_cat
          })

          if (res.meta.status === 200) {
            this.$message.success("此商品修改成功！")
          } else {
            this.$message.error("此商品修改失败！")
          }

          // 关闭回调
          this.alterHandleClose()
          // 因为每次更改后，数据会变成最开始展示的第一条
          this.listCurrentPage = 1
          this.getListGoods()

        })
      },


      // 操作块-删除按钮的点击
      removeListGoodsBut(row) {
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          closeOnClickModal: false
        }).then(async () => {

          let {data:res} = await this.$http.delete(`goods/${row.goods_id}`)

          if(res.meta.status === 200){
            this.getListGoods()
            this.$message.success("此商品删除成功！")
          }else{
            this.$message.error("此商品删除失败！")
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },


      // 添加商品按钮点击函数
      addListGoods_But(){
        // 点击跳转到添加商品组件的路由内
        this.$router.push('/add_list_goods')
      }
    }
  }

</script>
<style lang="less" scoped>
  
</style>